<template>
  <div class="app-container">
    <el-tree
      :data="categories"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      style="width:60%"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => edit(data)">编辑</el-button>
          <el-button type="text" size="mini" @click="() => append(data)">添加</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog title="编辑分类" :visible.sync="dialogVisible" width="30%">
      <p>分类名称</p>
      <el-input v-model="categoryName"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCategoryName">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchContentCategories,
  addContentCategory,
  updateContentCategory,
  deleteContentCategory
} from "@/api/cms";
export default {
  name: "Category",
  data() {
    return {
      isEdit: false,
      categoryName: "",
      dialogVisible: false,
      categories: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf"
      },
      current: {} //当前操作的节点
    };
  },
  methods: {
    //获取分类数据
    getData() {
      fetchContentCategories().then(res => {
        this.categories = res.data;
      });
    },
    //编辑
    edit(data) {
      this.isEdit = true;
      this.categoryName = data.label;

      this.current = data;

      //弹出弹出框，用于输入节点（分类的名称）
      this.dialogVisible = true;
    },
    //新增节点
    append(data) {
      this.isEdit = false;
      this.categoryName = "";
      console.log(data);
      this.current = data;
      /*
      const newChild = { id: 10000, label: "testtest", children: [],isLeaf: true };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      */
      //弹出弹出框，用于输入节点（分类的名称）
      this.dialogVisible = true;
    },
    //删除节点
    remove(node, data) {
      this.$confirm("是否确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 执行删除操作
          let id = data.id;
          deleteContentCategory(id).then(res => {
            //更新页面
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
          });
        })
        .catch(() => {
          
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitCategoryName() {
      this.dialogVisible = false;
      //this.categoryName  当前父节点
      if (this.isEdit) {
        let category = {
          name: this.categoryName,
          id: this.current.id
        };
        updateContentCategory(category).then(res => {
          this.current.label = this.categoryName;
        });
      } else {
        let category = {
          name: this.categoryName,
          parentId: this.current.id
        };
        addContentCategory(category).then(res => {
          const newChild = {
            id: res.data.id,
            label: this.categoryName,
            children: [],
            isLeaf: true
          };
          if (!this.current.children) {
            this.$set(this.current, "children", []);
            //this.current.children = [];
          }
          this.current.children.push(newChild);
        });
      }
    }
  },
  created: function() {
    this.getData();
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>